<template>
  <div class="main">
    <router-view v-slot="{ Component }" v-if="keepAliveShow">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <transition name="el-fade-in-linear" v-if="!keepAliveShow">
      <router-view v-slot="{ Component }">
        <component :is="Component" />
      </router-view>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from "vue";
const keepAliveShow = ref<any>(false);
import { useRoute } from "vue-router";
const route = useRoute();
const init = () => {
  keepAliveShow.value = route.meta.keepAlive;
};

watch(route, () => {
  init();
});
onMounted(() => {
  init();
});
</script>
<style lang="scss" scoped>
.main {
  padding: 0px 10px 0px 10px;
  height: 100%;
  margin: 0 auto;
}
</style>
